<template>
  <div class="classic">
    <swiper :options="swiperOption">
      <swiper-slide v-for="item in list" :key="item.id">
        <ul>
          <li class="list" v-for="items in item">
            <ol>
              <li><img :src="items.imgUrl" :alt="items.txt"></li>
              <li class="txt">{{ items.txt }}</li>
            </ol>
          </li>
        </ul>
      </swiper-slide>
      <!-- 分页器 -->
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
  export default {
    props: ["classic"],
    data() {
      return {
        // imgLists: [
        //   {
        //     "id": "01",
        //     "imgUrl": require("@/assets/img/classicSwiper/01.png"),
        //     "txt": "器械训练"
        //   },
        //   {
        //     "id": "02",
        //     "imgUrl": require("@/assets/img/classicSwiper/02.png"),
        //     "txt": "器械训练器械训练"
        //   },
        //   {
        //     "id": "03",
        //     "imgUrl": require("@/assets/img/classicSwiper/03.png"),
        //     "txt": "器械训练器械训练"
        //   },
        //   {
        //     "id": "04",
        //     "imgUrl": require("@/assets/img/classicSwiper/04.png"),
        //     "txt": "器械训练"
        //   },
        //   {
        //     "id": "05",
        //     "imgUrl": require("@/assets/img/classicSwiper/05.png"),
        //     "txt": "器械训练器械训练"
        //   },
        //   {
        //     "id": "06",
        //     "imgUrl": require("@/assets/img/classicSwiper/06.png"),
        //     "txt": "器械训练"
        //   },
        //   {
        //     "id": "07",
        //     "imgUrl": require("@/assets/img/classicSwiper/07.png"),
        //     "txt": "器械训练"
        //   },
        //   {
        //     "id": "08",
        //     "imgUrl": require("@/assets/img/classicSwiper/08.png"),
        //     "txt": "器械训练器械训练"
        //   },
        //   {
        //     "id": "09",
        //     "imgUrl": require("@/assets/img/classicSwiper/09.png"),
        //     "txt": "器械训练"
        //   },
        //   {
        //     "id": "10",
        //     "imgUrl": require("@/assets/img/classicSwiper/10.png"),
        //     "txt": "器械训练"
        //   },
        //   {
        //     "id": "12",
        //     "imgUrl": require("@/assets/img/classicSwiper/01.png"),
        //     "txt": "器械训练器械训练"
        //   },
        //   {
        //     "id": "13",
        //     "imgUrl": require("@/assets/img/classicSwiper/02.png"),
        //     "txt": "器械训练"
        //   },
        //   {
        //     "id": "14",
        //     "imgUrl": require("@/assets/img/classicSwiper/03.png"),
        //     "txt": "器械训练"
        //   },
        //   {
        //     "id": "15",
        //     "imgUrl": require("@/assets/img/classicSwiper/04.png"),
        //     "txt": "器械训练器械训练"
        //   },
        //   {
        //     "id": "16",
        //     "imgUrl": require("@/assets/img/classicSwiper/05.png"),
        //     "txt": "器械训练"
        //   },
        //   {
        //     "id": "17",
        //     "imgUrl": require("@/assets/img/classicSwiper/06.png"),
        //     "txt": "器械训练器械训练"
        //   },
        //   {
        //     "id": "18",
        //     "imgUrl": require("@/assets/img/classicSwiper/07.png"),
        //     "txt": "器械训练"
        //   },
        //   {
        //     "id": "19",
        //     "imgUrl": require("@/assets/img/classicSwiper/05.png"),
        //     "txt": "器械训练"
        //   },
        //   {
        //     "id": "20",
        //     "imgUrl": require("@/assets/img/classicSwiper/06.png"),
        //     "txt": "器械训练器械训练"
        //   },
        //   {
        //     "id": "21",
        //     "imgUrl": require("@/assets/img/classicSwiper/07.png"),
        //     "txt": "器械训练器械训练"
        //   },
        //   {
        //     "id": "22",
        //     "imgUrl": require("@/assets/img/classicSwiper/08.png"),
        //     "txt": "器械训练"
        //   },
        //   {
        //     "id": "23",
        //     "imgUrl": require("@/assets/img/classicSwiper/09.png"),
        //     "txt": "器械训练"
        //   }
        // ],
        swiperOption: {
          pagination: {
            el: '.swiper-pagination',
          },
        }
      }
    },
    computed: {
      list() {
        var arr = [];
        this.classic.forEach((item, index) => {
          var n = Math.floor(index / 8);
          if (!arr[n]) arr[n] = [];
          arr[n].push(item);
        });
        return arr;
      }
    },
  }
</script>

<style scoped lang="scss">
  @import "./../../../assets/css/public";

  .classic {
    width: 100%;
    height: 3.7rem;
    font-size: .28rem;
    background: #fff;
    padding-top: .1rem;
  }

  .classic img {
    width: 1.1rem;
    height: 1.1rem;
  }

  .list {
    float: left;
    width: 25%;
    height: 1.5rem;
    padding-top: .1rem;
    text-align: center;
  }

  .txt {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: $color;
  }

  .classic > > > .swiper-container {
    padding-bottom: .6rem;
  }
</style>
